<template>
  <div>
<!--    <keep-alive>
      <router-view></router-view>
    </keep-alive>-->
    <transition name="router-slid" mode="out-in">
      <keep-alive>
        <router-view v-if="$route.meta.keepAlive"></router-view>
      </keep-alive>
    </transition>
 <!--   https://www.vuefe.cn/v2/guide/transitions.html-->
<!--    out-in：当前元素先过渡离开(transition out)，过渡完成之后，新元素过渡进入(transition in)。-->
    <transition name="router-slid" mode="out-in">
      <router-view v-if="!$route.meta.keepAlive"></router-view>
    </transition>
    <svg-icon></svg-icon>
  </div>
</template>

<script>
  import svgIcon from './components/common/svg';
  export default {
    components:{
      svgIcon,
    },
  }

</script>

<style lang="scss">
  @import './style/common';
  .router-slid-enter-active, .router-slid-leave-active {
   /* transition: all 0.3s;*/
  }
  .router-slid-enter, .router-slid-leave-active {
/*    transform: translate3d(2rem, 0, 0);*/
    /*opacity: 0;*/
  }
 /* .slide-enter-active,.slide-leave-active{
    transition :all 0.3s
  }

  .slide-enter,.slide-leave-to{
    transform:translate3d(0,-100%,0)
  }*/
</style>
